<template>
  <div class="system-manage">
    <div class="page-header">
      <h2>系统设置</h2>
    </div>

    <el-card class="setting-card">
      <template #header>
        <div class="card-header">
          <span>基本设置</span>
        </div>
      </template>
      
      <el-form :model="systemSettings" label-width="120px">
        <el-form-item label="系统名称">
          <el-input v-model="systemSettings.systemName" />
        </el-form-item>
        
        <el-form-item label="系统Logo">
          <el-upload
            class="logo-uploader"
            action="#"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleLogoChange">
            <img v-if="logoUrl" :src="logoUrl" class="logo" />
            <el-icon v-else class="upload-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="开启选课系统">
          <el-switch v-model="systemSettings.courseSelectionEnabled" />
        </el-form-item>
        
        <el-form-item label="选课开始时间" v-if="systemSettings.courseSelectionEnabled">
          <el-date-picker 
            v-model="systemSettings.courseSelectionStartTime" 
            type="datetime" 
            placeholder="选择日期时间" />
        </el-form-item>
        
        <el-form-item label="选课结束时间" v-if="systemSettings.courseSelectionEnabled">
          <el-date-picker 
            v-model="systemSettings.courseSelectionEndTime" 
            type="datetime" 
            placeholder="选择日期时间" />
        </el-form-item>
        
        <el-form-item label="每日开放时间">
          <el-time-picker
            v-model="systemSettings.dailyOpenTime"
            placeholder="开放时间" />
          <span style="margin: 0 12px;">至</span>
          <el-time-picker
            v-model="systemSettings.dailyCloseTime"
            placeholder="关闭时间" />
        </el-form-item>
        
        <el-form-item label="当前学期">
          <el-select v-model="systemSettings.currentSemester">
            <el-option 
              v-for="semester in semesters" 
              :key="semester" 
              :label="semester" 
              :value="semester" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="最大选课数量">
          <el-input-number v-model="systemSettings.maxCourseSelection" :min="1" :max="20" />
        </el-form-item>
        
        <el-form-item label="备份频率">
          <el-select v-model="systemSettings.backupFrequency">
            <el-option label="每天" value="daily" />
            <el-option label="每周" value="weekly" />
            <el-option label="每月" value="monthly" />
          </el-select>
        </el-form-item>
      </el-form>
      
      <div class="form-footer">
        <el-button type="primary" @click="saveSettings">保存设置</el-button>
        <el-button @click="resetSettings">重置</el-button>
      </div>
    </el-card>
    
    <el-card class="setting-card">
      <template #header>
        <div class="card-header">
          <span>系统维护</span>
        </div>
      </template>
      
      <div class="maintenance-options">
        <el-button type="primary" @click="backupDatabase">
          <el-icon><Download /></el-icon> 备份数据库
        </el-button>
        
        <el-button type="warning" @click="clearCache">
          <el-icon><Delete /></el-icon> 清除缓存
        </el-button>
        
        <el-button type="warning" @click="confirmRestart">
          <el-icon><RefreshRight /></el-icon> 重启系统
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Download, Delete, RefreshRight } from '@element-plus/icons-vue'

// 系统设置数据
const systemSettings = reactive({
  systemName: '智能选课系统',
  courseSelectionEnabled: true,
  courseSelectionStartTime: new Date(2023, 7, 1, 9, 0),
  courseSelectionEndTime: new Date(2023, 7, 15, 17, 0),
  dailyOpenTime: new Date(2000, 0, 1, 8, 0),
  dailyCloseTime: new Date(2000, 0, 1, 22, 0),
  currentSemester: '2023-2024-1',
  maxCourseSelection: 8,
  backupFrequency: 'daily'
})

// Logo相关
const logoUrl = ref('')
const handleLogoChange = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    logoUrl.value = e.target.result
  }
  reader.readAsDataURL(file.raw)
}

// 学期列表
const semesters = [
  '2022-2023-2',
  '2023-2024-1',
  '2023-2024-2',
  '2024-2025-1'
]

// 保存设置
const saveSettings = () => {
  // 保存到服务器的逻辑
  setTimeout(() => {
    ElMessage.success('系统设置已保存')
  }, 1000)
}

// 重置设置
const resetSettings = () => {
  ElMessageBox.confirm(
    '确定要重置所有设置吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 重置逻辑
      Object.assign(systemSettings, {
        systemName: '智能选课系统',
        courseSelectionEnabled: true,
        courseSelectionStartTime: new Date(2023, 7, 1, 9, 0),
        courseSelectionEndTime: new Date(2023, 7, 15, 17, 0),
        dailyOpenTime: new Date(2000, 0, 1, 8, 0),
        dailyCloseTime: new Date(2000, 0, 1, 22, 0),
        currentSemester: '2023-2024-1',
        maxCourseSelection: 8,
        backupFrequency: 'daily'
      })
      logoUrl.value = ''
      ElMessage.success('系统设置已重置')
    })
    .catch(() => {})
}

// 备份数据库
const backupDatabase = () => {
  // 备份逻辑
  setTimeout(() => {
    ElMessage.success('数据库备份已完成')
  }, 1500)
}

// 清除缓存
const clearCache = () => {
  ElMessageBox.confirm(
    '确定要清除系统缓存吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 清除缓存逻辑
      setTimeout(() => {
        ElMessage.success('系统缓存已清除')
      }, 1000)
    })
    .catch(() => {})
}

// 重启系统
const confirmRestart = () => {
  ElMessageBox.confirm(
    '确定要重启系统吗？这将导致所有用户暂时无法访问系统。',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 重启系统逻辑
      setTimeout(() => {
        ElMessage.success('系统重启指令已发送')
      }, 1000)
    })
    .catch(() => {})
}
</script>

<style scoped>
.system-manage {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
}

.setting-card {
  margin-bottom: 20px;
}

.card-header {
  font-weight: bold;
}

.logo-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-uploader:hover {
  border-color: #409eff;
}

.upload-icon {
  font-size: 28px;
  color: #8c939d;
}

.logo {
  width: 178px;
  height: 178px;
  display: block;
}

.form-footer {
  margin-top: 20px;
  text-align: right;
}

.maintenance-options {
  display: flex;
  gap: 15px;
}

@media (max-width: 768px) {
  .maintenance-options {
    flex-direction: column;
  }
}
</style> 